<!--
 * @Author: YNT 2501512800@qq.com
 * @Date: 2022-07-19 15:09:20
 * @LastEditors: YNT 2501512800@qq.com
 * @LastEditTime: 2022-07-19 16:24:02
 * @FilePath: \智慧社区的副本\src\components\echart\PieChart.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="pieChart" ref="pieChart" class="echart" />
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'Echart',
  props: {
    infoObj: Object
  },
  data() {
    return {
      pieChart: null
    }
  },
  watch: {
    'infoObj.data': function() {
      const _that = this
      if (this.infoObj.data.length > 0) {
        this.pieChart.clear()
        this.pieFun()
        window.addEventListener('resize', function() {
          _that.pieChart.resize()
        })
      }
    }
  },
  mounted() {
    const _that = this
    if (this.infoObj.data.length > 0) {
      this.pieFun()
      window.addEventListener('resize', function() {
        _that.pieChart.resize()
      })
    }
  },
  methods: {
    pieFun() {
      this.pieChart = echarts.init(this.$refs.pieChart)
      console.log(this.pieChart)
      const option = {
        title: {
          text: this.infoObj.title,
          left: 0,
          textStyle: {
            fontSize: 15
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        toolbox: {
          itemSize: 16,
          itemGap: 30,
          right: 0,
          feature: {}
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.infoObj.data
          }
        ]
      }
      this.pieChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
    .echart {
        min-width: 400px;
        height: 300px;
    }
</style>
